<div class="query-section">
  <div style="display: flex; align-items: center; gap: 16px;">
    <span style="font-weight: 500;">齐套状态筛选：</span>
    <label nz-checkbox [(ngModel)]="kitStatusFilters.allComplete" (ngModelChange)="onKitStatusFilterChange()">
      全部齐套
    </label>
    <label nz-checkbox [(ngModel)]="kitStatusFilters.partialComplete" (ngModelChange)="onKitStatusFilterChange()">
      部分齐套
    </label>
    <label nz-checkbox [(ngModel)]="kitStatusFilters.incomplete" (ngModelChange)="onKitStatusFilterChange()">
      不齐套
    </label>
  </div>
  <div style="display: flex; gap: 8px;">
    <button nz-button nzType="default" (click)="loadData(false)" [nzLoading]="loading">
      <span nz-icon nzType="reload" nzTheme="outline"></span>
      加载订单
    </button>
    <button nz-button nzType="primary" (click)="onKitAnalysis()" [nzLoading]="analyzing" [disabled]="dataList.length === 0">
      <span nz-icon nzType="radar-chart" nzTheme="outline"></span>
      齐套分析
    </button>
    <button nz-button nzType="default" (click)="onExport()" [nzLoading]="exporting" [disabled]="dataList.length === 0">
      <span nz-icon nzType="download" nzTheme="outline"></span>
      导出
    </button>
  </div>
</div>
<nz-card class="main-card">
  <nz-table 
    #basicTable 
    [nzData]="dataList" 
    [nzLoading]="loading"
    [nzFrontPagination]="false"
    [nzTotal]="totalCount"
    [nzScroll]="{ x: '100%', y: '100%' }"
    [nzPageSize]="pageSize"
    [nzPageIndex]="pageIndex"
    [nzPageSizeOptions]="[10, 20, 50, 100]"
    [nzShowSizeChanger]="true"
    [nzShowTotal]="totalTemplate"
    (nzPageIndexChange)="onPageIndexChange($event)"
    (nzPageSizeChange)="onPageSizeChange($event)">
    <ng-template #totalTemplate let-total>共 {{ total }} 条数据</ng-template>
    <thead>
      <tr>
        <th [nzWidth]="'40px'" nzLeft></th>
        <th [nzWidth]="'60px'" nzLeft>序号</th>
        <th [nzWidth]="'120px'" nzLeft>物料编码</th>
        <th [nzWidth]="'200px'" nzLeft>物料名称</th>
        <th [nzWidth]="'200px'" nzLeft>物料规格</th>
        <th [nzWidth]="'200px'">单据编号</th>
        <th [nzWidth]="'120px'">单据类型</th>
        <th [nzWidth]="'120px'">番号</th>
        <th [nzWidth]="'120px'">需求分类</th>
        <th [nzWidth]="'160px'">开工日期</th>
        <th [nzWidth]="'160px'">调整后开工日期</th>
        <th [nzWidth]="'100px'">数量</th>
        <th [nzWidth]="'120px'">调整后数量</th>
        <th [nzWidth]="'100px'">齐套数量</th>
        <th [nzWidth]="'100px'">齐套状态</th>
      </tr>
    </thead>
    <tbody>
      <!-- 递归子项模板（放在 tbody 内部） -->
      <ng-template #childrenTemplate let-items="items" let-parentIndex="parentIndex" let-level="level">
        <ng-container *ngFor="let item of items; let j = index; trackBy: trackByItem">
          <tr class="bom-row" 
              [class]="'bom-level-' + level">
            <td nzLeft>
              <span *ngIf="item.children && item.children.length > 0"
                    nz-icon 
                    nzType="caret-right"
                    nzTheme="outline"
                    [nzRotate]="item.expanded ? 90 : 0"
                    (click)="expandBom(item)" 
                    style="cursor: pointer; color: #1890ff; transition: transform 0.3s;">
              </span>
            </td>
            <td nzLeft>{{ parentIndex }}.{{ j + 1 }}</td>
            <td nzLeft>{{ item.itemCode }}</td>
            <td nzLeft>{{ item.itemName }}</td>
            <td nzLeft>{{ item.itemSpec }}</td>
            <td>{{ item.docNo }}</td>
            <td>{{ item.docType }}</td>
            <td>{{ item.seiban }}</td>
            <td>{{ item.demandCode }}</td>
            <td>{{ item.startDate | date: 'yyyy-MM-dd' }}</td>
            <td>{{ item.adjustedStartDate | date: 'yyyy-MM-dd' }}</td>
            <td>{{ item.quantity }}</td>
            <td>{{ item.adjustedQuantity }}</td>
            <td>{{ item.kitCount }}</td>
            <td>
              <span [ngClass]="getKitStatusClass(item.kitStatus)">{{ item.kitStatus }}</span>
            </td>
          </tr>
          
          <!-- 递归调用自己展示下一层子项 -->
          <ng-container *ngIf="item.expanded && item.children && item.children.length > 0">
            <ng-container *ngTemplateOutlet="childrenTemplate; context: { 
              items: item.children, 
              parentIndex: parentIndex + '.' + (j + 1),
              level: level + 1
            }"></ng-container>
          </ng-container>
        </ng-container>
      </ng-template>

      <ng-container *ngFor="let order of basicTable.data; let i = index">
        <!-- 主订单行 -->
        <tr>
          <td nzLeft>
            <span *ngIf="order.children && order.children.length > 0"
                  nz-icon 
                  nzType="caret-right"
                  nzTheme="outline"
                  [nzRotate]="order.expanded ? 90 : 0"
                  (click)="expandBom(order)" 
                  style="cursor: pointer; color: #1890ff; transition: transform 0.3s;">
            </span>
          </td>
          <td nzLeft>{{ getGlobalIndex(i) }}</td>
          <td nzLeft>{{ order.itemCode }}</td>
          <td nzLeft>{{ order.itemName }}</td>
          <td nzLeft>{{ order.itemSpec }}</td>
          <td>{{ order.docNo }}</td>
          <td>{{ order.docType }}</td>
          <td>{{ order.seiban }}</td>
          <td>{{ order.demandCode }}</td>
          <td>{{ order.startDate | date: 'yyyy-MM-dd' }}</td>
          <td>{{ order.adjustedStartDate | date: 'yyyy-MM-dd' }}</td>
          <td>{{ order.quantity }}</td>
          <td>{{ order.adjustedQuantity }}</td>
          <td>{{ order.kitCount }}</td>
          <td>
            <span [ngClass]="getKitStatusClass(order.kitStatus)">{{ order.kitStatus }}</span>
          </td>
        </tr>
        
        <!-- 递归展示子项 -->
        <ng-container *ngIf="order.expanded && order.children && order.children.length > 0">
          <ng-container *ngTemplateOutlet="childrenTemplate; context: { 
            items: order.children, 
            parentIndex: getGlobalIndex(i).toString(),
            level: 1
          }"></ng-container>
        </ng-container>
      </ng-container>
    </tbody>
  </nz-table>
</nz-card>
<!-- 齐套分析对话框 -->
<nz-modal
  [(nzVisible)]="isKitAnalysisModalVisible"
  nzTitle="齐套分析"
  nzWidth="500px"
  (nzOnCancel)="handleKitAnalysisCancel()"
  (nzOnOk)="handleKitAnalysisOk()"
  [nzOkLoading]="analyzing">
  <ng-container *nzModalContent>
    <div style="padding: 20px 0;">
      <nz-form-item>
        <nz-form-label [nzSpan]="6">分配类型</nz-form-label>
        <nz-form-control [nzSpan]="18">
          <nz-radio-group [(ngModel)]="selectedAllocationType">
            <label nz-radio nzValue="满额分配" style="display: block; margin-bottom: 8px;">满额分配</label>
            <label nz-radio nzValue="最小分配" style="display: block; margin-bottom: 8px;">最小分配</label>
            <label nz-radio nzValue="不分配" style="display: block; margin-bottom: 8px;">不分配</label>
          </nz-radio-group>
          <div style="margin-top: 12px; color: #666; font-size: 12px;">
            <div *ngIf="selectedAllocationType === '满额分配'">每个料号按自己的可分配套数分配</div>
            <div *ngIf="selectedAllocationType === '最小分配'">所有料号统一按最小的可分配套数分配</div>
            <div *ngIf="selectedAllocationType === '不分配'">只有全部齐套才分配，否则都设为0</div>
          </div>
        </nz-form-control>
      </nz-form-item>
    </div>
  </ng-container>
</nz-modal>